<template>
	<view class="wrap">
		<view class="">
			<view class="title"><text>确定信息</text></view>
			<view class="bg">
				<view class="group">
					<view class="lab">滑雪主题:</view>
					<view class="inp_box"><input :value="$util.entitiesToUtf16(ballInfo.Title)" disabled type="text" /></view>
				</view>

				<view class="group">
					<view class="lab">开始时间:</view>
					<view class="inp_box"><input :value="formtStartBall()" type="text" disabled /></view>
				</view>

				<view class="group">
					<view class="lab">滑雪场地:</view>
					<view class="inp_box"><input :value="ballInfo.Place" type="text" disabled /> </view>
				</view>
				<view class="group">
					<view class="lab">距离(km):</view>
					<view class="inp_box"><input :value="ballInfo.Distance+'km'" disabled type="text" /></view>
				</view>
			</view>
		</view>

		<view class="join_btn flx flx_align_center flx_justify_center">
			<view class="btn" @click="sub">确认预约</view>
			<view class="f3 c3 rd" @click="setRead">
				<radio style="transform:scale(0.7)" :checked="isRead" color="#B98B51"></radio>
				我已阅读并同意
				<text class="c_sed" @click.stop="openPopupTip">《滑雪须知》</text>
			</view>
		</view>

		<uni-popup ref="popupTip" type="bottom">
			<view class="tip wap">
				<view class="tit f1 fwb">
					报名须知
				</view>
				<view class="txt">
					<view class="mt20"><text class="f3 c2">1.不得发布非法广告：包括但不限于色情推广、漏点画面，销售假冒伪劣和违禁品，利用一些违反广告法的行为推销，违反公序良俗的行为。</text>
					</view>
					<view class="mt20"><text class="f3 c2">2.不得仪容仪表不当：包括但不限于裸露上身、大面积裸纹身等，不符合审美能力的一些妆容，带有性暗示的直播内容。</text>
					</view>
					<view class="mt20"><text
							class="f3 c2">3.不得侵犯消费者权利：行为有很多,销售假冒伪劣产品,以次充好强迫消费者购买,销售过期产品。并且不给消费者退费,价格虚高,包括但不限于盗用、复制、直播无转播权的活动现场、录制、直播无版权的视听内容等。</text>
					</view>
					<view class="mt20"><text
							class="f3 c2">4.不得销售违禁品：任何人售卖违禁品会触犯法律的底线，受到法律的制裁。包括但不限于防身刀、激光笔等管制刀具;烟花爆竹、鞭炮等易燃易爆物品;含有色情、暴力、低俗等内容的产品。</text>
					</view>
					<view class="mt20"><text class="f3 c2">5.不得对未成年人有害的行为：未成年人思想还不成熟，易受诱惑。</text></view>
				</view>
				<view class="btn mt20 mb30" @click="closePopupTip">关闭</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ball_ID: 0,
				ballInfo: {},
				isRead: false,
				longitude: '',
				latitude: '',
			};
		},
		async onLoad(e) {

			this.ball_ID = e.id;

			await this.$api.post('/Common/Add_ViewPath', {
				Path: 'ball_join_confirm',
				Platform: uni.getStorageSync('platform')
			});


			let loc = await this.getLocationSysc();

			this.longitude = loc.longitude;
			this.latitude = loc.latitude;

			let res = await this.$api.post('Appointment/Detail', {
				ID: e.id,
				User_Lng: this.longitude,
				User_Lat: this.latitude
			});
			if(res.code == 0){
				this.ballInfo = res.data;
			}
			

		},
		async onShow() {

		},
		methods: {
			openPopupTip() {
				this.$refs.popupTip.open();
			},
			closePopupTip() {
				this.$refs.popupTip.close();
			},
			// 获取定位
			async getLocationSysc() {
				let _this = this;
				return new Promise((resolve, reject) => {
					uni.getLocation({
						type: 'gcj02',
						success: function(res) {
							resolve(res)
						},
						fail: function(err) {
							const defaultLocation = {
								latitude: 0,
								longitude: 0
							};
							resolve(defaultLocation);
						}
					});
				})

			},
			openMsg() {
				// #ifdef MP-WEIXIN
				return new Promise((r, j) => {
					wx.requestSubscribeMessage({
						tmplIds: [
							'JjAGfFcjOyiJciTpc6noLLspC7JEet2Gb1Pt3iWh55Y',
							'GJbLgiFQTdYnKSuqPCNtMA-ADkxwONj756WXrUebPdM'
						],
						success(res) {
							r(res);
						},
						fail(err) {
							j(res);
						}
					});
				});
				// #endif
				// #ifdef APP
				return true
				// #endif
			},
			setRead() {
				this.isRead = !this.isRead;
			},
			setGoTime(e) {
				this.goTime.value = e.value[0];
				this.goTime.show = false;
			},
			getTime2(l) {
				let d = new Date(l);
				let timestamp = d.getTime();
				return this.$u.date(timestamp, 'mm-dd');
			},
			getWeek(l) {
				let d = new Date(l);
				let week = d.getDay();
				let weelStr =
					week == 0 ?
					'星期天' :
					week == 1 ?
					'星期一' :
					week == 2 ?
					'星期二' :
					week == 3 ?
					'星期三' :
					week == 4 ?
					'星期四' :
					week == 5 ?
					'星期五' :
					'星期六';
				return weelStr;
			},
			formtStartBall() {
				if(this.ballInfo.ServerDate &&  this.ballInfo.ServerTime){
					return `${this.getTime2(this.ballInfo.ServerDate)} ${this.	getWeek(this.ballInfo.ServerDate)} ${this.ballInfo.ServerTime}`;
				}else{
					return ''
				}
				
			},
			async sub() {

				// await this.openMsg();

				if (!this.isRead) {
					this.$pv.msg('请先勾选《约球须知》');
					return;
				}

				const user = uni.getStorageSync('user')


				if (this.ballInfo.UserID == user.UserID) {
					this.$pv.msg('不能报名自己的')
					return
				}

				this.$pv.load();
				let res = await this.$api.post('Appointment/AddItem', {
					ID: this.ballInfo.ID,
					Price: this.ballInfo.Price,
					PeopleNum: this.ballInfo.PeopleNum
				});

				console.log('join ball' + JSON.stringify(res.data));

				if (!res.data) {
					this.$pv.msg('您已预约');
					
					setTimeout(()=>{
						uni.navigateBack({
							delta: 1 
						});
					},500)
					// this.nav_to('/pages/ball/ball_details?id=' + this.ballInfo.ID);
					return;
				}
				this.$pv.msg('预约成功');

				//uni.$emit('join_confirm', {})
				setTimeout(()=>{
					uni.navigateBack({
						delta: 1 
					});
				},500)
				
				


			}
		}
	};
</script>

<style lang="scss">
	page,
	.wrap {
		height: 100%;
	}

	.wrap {
		position: relative;


		.join_btn {
			position: absolute;
			width: 100%;
			bottom: 48rpx;
			flex-wrap: wrap;

			>.btn {
				width: 92%;
				margin-bottom: 8rpx;
			}
		}
	}

	.title {
		padding: 20rpx 0 10rpx;
		margin-left: 30rpx;
		font-size: 44rpx;
		line-height: 60rpx;
	}

	.bg {
		margin-top: 20rpx;
		// background: #202020;
		border-radius: 16rpx;
	}

	.group {
		display: flex;
		align-items: center;
		height: 100rpx;
		border-bottom: 1px solid #e4e4e4;
		margin-left: 30rpx;
		margin-right: 30rpx;

		&:last-child {
			// border-bottom: none;
		}

		.lab {
			padding-right: 10rpx;
			color: #333;
			font-size: 32rpx;
		}

		.goTime {
			color: white;
		}

		.inp_box {
			flex: 1;

			input {
				width: 100%;
				text-align: right;
			}
		}

		.icon_box {
			height: 40rpx;
			width: 40rpx;
			line-height: 40rpx;
		}
	}

	.mt30 {
		margin-top: 30rpx;
	}

	.tip {
		padding-bottom: 20rpx;
		background: #fff;
		border-radius: 10rpx 10rpx 0 0;

		.tit {
			line-height: 90rpx;
			text-align: center;
			color: #333;
		}

		.txt {
			.c2 {
				color: #666;
			}
		}

		.mb30 {
			margin-bottom: 30rpx;
		}
	}
</style>